// 车险计费 二维码
<template>

<Modal 
@on-ok='enter'
@on-cancel='cancel'
:closable='false'
:loading='true'
:mask-closable='false'
:okText='okText'
v-model="hasData">

    <div class="car-charging-code" v-if='hasData'>

        <div class="item" v-for='mod of mods' :key='mod.key' v-if='chargingCode[mod.key]'>
            <div class="title">
                <c-block-header :title='mod.label'></c-block-header>
            </div>
            <div class="content">
                <Input class="val" v-model="chargingCode[mod.key].checkAnswer"></Input>
                <div class="code">
                    <img :src="imgPrefix + chargingCode[mod.key].checkCode" alt="code">
                </div>
            </div>
            
        </div>
        
    </div>

</Modal>
 
</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
import {mapState} from 'vuex'
import chargingRestructrue from '../../service/middleware_fns/car_charging_restructrue_fn';

const vueObj:any = new Vue()

@Component({
    computed: {
        ...mapState('carFormStore', ['chargingCode'])
    }
})
export default class carChargingCode extends Vue{
    name:string = 'car-charging-code'

    chargingCode:formInf.chargingCode

    imgPrefix:string =  'data:image/png;base64,'
    
    get hasData(){
        return !!this.chargingCode
    }

    loading:boolean = false
    
    get okText(){
        return this.loading ? '数据请求中' : '确认'
    }
    
    enter (){
        let _this = this;

        // 提交二维码
        this.$store.dispatch('request', {
            url: 'get/bill/id',
            data:{}
        }).then(success =>{
            _this.loading = false;
        })
        
    }

    cancel (){
        // 清除缓存验证
        this.$store.commit('carFormStore/updateChargingCode', undefined)
    }

    mods = [

        {
            label: '交险验证码',
            key: 'jqCheckData'
        },
        {
            label: '商险验证码',
            key: 'syCheckData'
        }

    ]


}

</script>
<style scoped lang='scss'>

.car-charging-code{
    margin-top:_rem(20px);
}

.item + .item{
    margin-top: _rem(20px);
}

.item .content{
    display: flex;
    justify-content: left;
    align-items: center; 

    .code{
        @extend %img_box;
        $size: _rem(112px);
        flex: 0 $size;
        width: $size;
        margin-left: _rem(10px);
        height: 100%;
        border-radius: $border_radius;
    }
    
}

</style>